<template>
  <div class="app-container pg-take-delivery">
    <div class="part-box pick-form">
      <el-form ref="pageForm" class="page-form" size="small" :rules="rules" :model="pageForm" label-width="90px">
        <div class="input-row">
          <span class="input-label">扫描单号：</span>
          <el-input class="input-inner" size="small" v-model.trim="pageForm.number" placeholder="请扫描客户订单号/物流单号" @keyup.enter.native="getPageDetail()"></el-input>
          <el-button class="input-btn" size="small" type="primary" @click="handleSubmit()" :disabled="btnDisabled">确认收货</el-button>
        </div>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="库位号" prop="locationCode">
              <el-input v-model="pageForm.locationCode" placeholder="请先输入单号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预报重量" prop="goodsWeight">
              <el-input v-model="pageForm.goodsWeight" placeholder="请先输入单号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打印标签" prop="isAutoPrint">
              <el-radio-group v-model="pageForm.isAutoPrint">
                <el-radio :label="0">不自动打印</el-radio>
                <el-radio :label="1">自动打印</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="货物称重" prop="weight">
              <el-input type="number" v-model="pageForm.weight" placeholder="请输入实重(KG)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物件数" prop="piece">
              <el-input v-model="pageForm.piece" placeholder="请先输入货物件数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="mb0" label="货物尺寸" required>
              <el-col :span="8">
                <el-form-item label-width="0" prop="length">
                  <el-input type="number" v-model="pageForm.length" placeholder="长(cm)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="0" prop="width">
                  <el-input type="number" v-model="pageForm.width" placeholder="宽(cm)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="0" prop="height">
                  <el-input type="number" v-model="pageForm.height" placeholder="高(cm)"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物体积" prop="volume">
              <el-input v-model="pageForm.volume" placeholder="请先输入货物尺寸" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="part-box">
      <div class="part-title">
        <h4 class="title-name font-14">收货清单</h4>
      </div>
      <div class="part-content">
        <el-table ref="pageTable" class="page-table border-all mt10"
          :data="tableData" :height="tableHeight" border stripe>
          <el-table-column align="center" type="index" label="序号" width="46"></el-table-column>
          <el-table-column show-overflow-tooltip prop="mainOrderNo" label="收货主单号" align="center" min-width="128"></el-table-column>
          <el-table-column show-overflow-tooltip prop="orderNo" label="收货日期" align="center" min-width="128"></el-table-column>
          <el-table-column show-overflow-tooltip prop="referenceNo" label="客户单号" align="center" min-width="128"></el-table-column>
          <el-table-column show-overflow-tooltip prop="orderCode" label="物流单号" align="center" min-width="128"></el-table-column>
          <el-table-column show-overflow-tooltip prop="orderNo" label="系统单号" align="center" min-width="128"></el-table-column>
          <el-table-column show-overflow-tooltip prop="warehouseName" label="收货仓库" align="center" min-width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="warehouseCode" label="库位号" align="center" min-width="98"></el-table-column>
          <el-table-column show-overflow-tooltip prop="piece" label="件数" align="center" min-width="72"></el-table-column>
          <el-table-column show-overflow-tooltip prop="weight" label="收货重量" align="center" min-width="88"></el-table-column>
          <el-table-column show-overflow-tooltip prop="orderNo" label="收货尺寸" align="center" min-width="98">
            <template slot-scope="scope">
              <span class="mr5">{{ scope.row.length }}</span>*<span class="mr5 ml5">{{ scope.row.width }}</span>*<span class="ml5">{{ scope.row.height }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import { checkInteger, checkPositiveNumber } from '@/utils/validate';
import * as API_Delivery from '@/api/oms/delivery';

export default {
  name: 'pg-take-delivery',
  dicts: ['ali_order_type', 'yes_no', 'check_weight_status'],
  mixins: [mixin, listmixin],
  data () {
    return {
      btnDisabled: true,
      pageForm: {
        number: undefined,
        locationCode: undefined,
        goodsWeight: undefined,
        isAutoPrint: 0,
        weight: '',
        length: undefined,
        width: undefined,
        height: undefined,
        volume: undefined,
        piece: undefined
      },
      rules: {
        weight: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        length: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        width: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        height: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        piece: [
          { required: true, validator: checkInteger, trigger: 'blur' }
        ]
      },
      tableData: []
    };
  },
  computed: {
    computedVolume () {
      const { length, width, height } = this.pageForm;
      return length * width * height;
    }
  },
  watch: {
    computedVolume (_newVal) {
      let _volume = undefined;
      if (!isNaN(_newVal) && !isNaN(parseFloat(Number(_newVal)))) {
        _volume = _newVal / 1000000;
      };
      this.$set(this.pageForm, 'volume', _volume);
    }
  },
  methods: {
    /**
      * @date 2025/07/30
      * @author wolfMan
      * @description {计算列表页面表格高度}
    */
    computedTableHeight () {
      this.$nextTick(() => {
        this.tableHeight = this.clientHeight - 64 - 197 - 40 - 21 -12;
      });
    },
    /**
      * @date 2025/07/29
      * @author wolfMan
      * @description {获取详情}
    */
    getPageDetail () {
      const { number } = this.pageForm;
      API_Delivery.getDetailByNo(number).then(response => {
        const { locationCode, weight, length, width, height, piece } = response.data || {};
        this.$nextTick(() => {
          this.pageForm = {
            ...this.pageForm,
            goodsWeight: weight,
            locationCode, length, width, height, piece
          };
        });
        this.btnDisabled = false;
      });
    },
    /**
      * @date 2025/07/29
      * @author wolfMan
      * @description {确认收货}
    */
    handleSubmit () {
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          const { number, weight, length, width, height, piece } = this.pageForm;
          let _params = {
            orderNo: number,
            weight, length, width, height, piece
          };
          API_Delivery.takeDelivery(_params).then(response => {
            let _row = response.data || {};
            this.tableData.unshift(_row) ;
            this.btnDisabled = true;
            this.pageForm.number = undefined;
            this.resetForm('pageForm');
          });
        } else {
          console.log('error submit!!');
          this.$msgError('请确保输入正确的完整信息');
          return false;
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pg-take-delivery {
  padding: 0;
  background: unset;
  .part-box {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    &.pick-form {
      padding-bottom: 2px;
    }
  }
  .input-row {
    display: flex;
    padding: 0 20px 15px 20px;
    margin: 0 -20px;
    margin-bottom: 15px;
    border-bottom: dashed 1px #dedede;
    .input-label {
      line-height: 32px;
      font-size: 18px;
      font-weight: 700;
    }
    .input-inner {
      width: 500px;
    }
    .input-btn {
      margin-left: 10px;
      width: 100px;
      font-weight: 700;
    }
  }
}
</style>